<{include file="top_v2.html" }>
<link rel="stylesheet" href="Public/Wap/v2/css/calglobal.css?v=8" />
<link rel="stylesheet" href="Public/Wap/v2/css/mui.picker.min.css?v=8" />
<style>
    @font-face {
        font-family: Muiicons;
        font-weight: normal;
        font-style: normal;
        src: url('Public/Wap/css/mui.ttf') format('truetype');
    }
    .mui-checkbox input[type=checkbox] {
        position: absolute;
        top: 0.15rem;
        right: 0.1rem;
        display: inline-block;
        border: 0;
        outline: 0!important;
        background-color: transparent;
        -webkit-appearance: none;
        height:1rem;
        width:1rem;
    }
    .mui-checkbox input[type=checkbox]:before {
        font-family: Muiicons;
        font-size: 1rem;
        text-decoration: none;
        color: #ec708a;
        border-radius: 0;
        background: 0 0;
        -webkit-font-smoothing: antialiased;
    }
    .mui-checkbox input[type=checkbox]:checked:before {
        content: '\e442';
    }
    .mui-checkbox input[type=checkbox]:before {
        content: '\e411';
    }
</style>
</head>
<body>
    <div id="wrap" class="pt detail-page houseFrm">
        <div class="header themeRed">
                <{$data['title']}>
            <a href="javascript:window.history.back();" class="back"></a>
        </div>
        <form>
            <input type="hidden" name="id" value="<{$data['id']}>" />
        <div class="frmBox mt">
            <dl>
                <dd class="icoAdr">
                    <span class="choose" id="cityPicker"><{$area|default:'浙江省/宁波市/'}></span>
                    <input type="hidden" name="area" id="area" value="<{$area|default:'浙江省/宁波市/'}>" required>
                </dd>
                <dd class="">
                    <input placeholder="请输入具体门牌号" type="text" value="<{$address}>" name="address" id="address" required>
                </dd>
                <dd class="icoClock">
                    <span class="choose" id="datePicker" >请选择服务时间</span>
                    <input type="hidden" name="time" id="time"  required>
                </dd>
            </dl>
        </div>
        <div class="items mt">
            <ul>
                <{foreach from=$items item=item}>
                <li>
                    <span class="name"><{$item['name']}></span>
                    <span class="money"><{$item['price']}>元/<{$item['unit']}></span>
                    <div class="numbox" data-price="<{$item['price']}>" data-point="<{$item['point']|default:0}>" data-reduce="<{$item['reduce']|default:0}>">
                        <label class="minus"></label>
                        <input class="num" type="number" name="item[]" value="0" onfocus="this.select()">
                        <label class="plus"></label>
                    </div>
                </li>
                <{/foreach}>

                <li class="total">
                    预计总价: <b id="js_totalPrice">00.00</b>元
                </li>

                <li class="total" style="text-align: left">
                    你的可用积分为：<b id="js_Point"><{$userinfo.point|default:0}></b><br />
                    <div class="mui-input-row mui-checkbox">
                        <label>本单可使用<b id="js_totalPoint">00</b>积分，是否使用积分？</label>

                            <input name="usePoint" id="usePoint" value="1" type="checkbox">

                    </div>
                </li>


            </ul>
        </div>
        <div class="frmBox mt">
            <dl>
                <dd class="icoInfo">
                    <input type="text" id="des" name="mem" placeholder="备注">
                </dd>
                <dd class="des">
                    <p>
                        <label>温馨提示:</label>
                        丸子妈妈家政服务，上门师傅不直接收费，完成清洗后，直接微信付款给丸子妈妈即可。
                    </p>
                </dd>
            </dl>
        </div>
        </form>
        <div class="frmBtn">
            <{if $noPhone eq 1}>
                <a href="javascript:void(0)" id="bind" class="btnBig">预约</a>
            <{else}>
                <a href="javascript:void(0);" id="btn_sub" class="btnBig">预约</a>
            <{/if}>
        </div>
    </div>

    <!-----------时间选择开始------->
    <div class="mask-time" style="display:none"></div><!--遮罩层-->
    <div class="time-area" style="display:none"><!--时间选择表格-->
        <input type="hidden" name="date_" value="">
        <input type="hidden" name="time_">
        <div class="box-date">
            <ul class="promptu-menu2 font13"></ul>
        </div>
        <div class="time-choose-table font13 txt-gray" id="time-choose-table"></div>
        <div class="font11 txt-light-gray txt-small" style="display:none"> 提示：灰色时间不可选择，最长可预约7天内的服务时间。</div>
        <input type="button" value="确定选择" class="am-btn btn-default am-btn-green mt-line btn-choose-time" style='width:94.668%;margin-top:0;font-size: 16px;'>
    </div>
    <!-----------时间选择结束------->

    <script>window.FastClick = true;</script>
    <script src="Public/Wap/v2/js/mui.min.js"></script>
    <script src="Public/Wap/v2/js/mui.picker.min.js"></script>
    <script src="Public/Wap/v2/js/city.data-3.js"></script>
    <script src="Public/Wap/v2/js/jquery.promptu-menu.js"></script>
    <script>
        function totalPrice(evt){
            var re=0;
            if( $('#usePoint')[0].checked){
                re=1;
            }

            var _t=0;
            var _pt=0;
            $('.numbox').each(function(i,o){
                var _p=$(this).attr('data-price');
                var _point=$(this).attr('data-point');
                var _r=$(this).attr('data-reduce');
                var _n=$(this).find('.num').val();
                _t  += (parseFloat(_p)-re*parseFloat(_r))*parseFloat(_n);
                _pt += parseFloat(_point)*parseFloat(_n);
            });
            if (re==1 && _pt > parseInt($('#js_Point').text())){
                tip("积分不足");
                if(evt) evt.target.value=evt.target.value-1;
                //totalPrice();
                return;
            }

            $('#js_totalPrice').html(_t.toFixed(2));
            $('#js_totalPoint').html(_pt);
        }

        var checkTimeUrl="<{U("getDailyStatus",['itemId'=>$data['id']])}>";

        $(function(){


            var type_ = 'hour';
            var days = 5;//可预约天数，含今天

            var nowDateArray = getNowFormatDate().split(' ');
            var date_ = nowDateArray[0];

            t(date_, type_, days);
            $('.mask-time').height($(window).height());


            $('#datePicker').click(function() {
                $('.mask-time,.time-area').show();

            });

            $('.btn-choose-time').click(function() {

                if (!$('input[name=time_]').val()) {
                    return alert('请选择服务时间');
                }
                var textTime = $('input[name=time_]').val().split(':');
                $('#time').val($('input[name=date_]').val() + ' ' + textTime[0] + ':' + textTime[1]);
                $('.mask-time,.time-area').css("display", "none");
                $('#datePicker').attr('value', 2).text( $('#time').val());
            });

            //////////////////////////////////////////////////////////////////////



                $('#bind').click(function(){
                    //询问框
                    layer.open({
                        content: '您尚未绑定手机号，只有绑定用户才可使用本服务'
                        ,btn: ['去绑定', '不要']
                        ,yes: function(index){
                            location.href="<{u('user/bind')}>";
                            layer.close(index);
                        }
                    });
                });
                $("#btn_sub").on("click", function () {
                    var area = $("#area").val(),address=$('#address').val(), time = $("#time").val();
                    if(area == '' || address == ''){
                        tip("请完善服务地址");
                        return false;
                    }
                    if (time == '') {
                        tip("请选择服务时间");
                        return false;
                    }

                    var hasItem=false;
                    $('.num').each(function(i){
                        if($(this).val()>0){hasItem=true};
                    });
                    if(!hasItem){
                        tip("请至少选择一个服务项目");
                        return false;
                    }


                    var data=$('form').serialize();
                    $.post("<{U('apply')}>",data,function(ret){
                        if(ret.status==0){
                            location.href="<{u('success')}>";
                        }else{
                            tip(ret.msg);
                        }
                    },'json');
                });



                //价格调整
                $('.numbox .minus').click(function(){
                    var $inp=$(this).next('.num');
                    var _n=parseInt($inp.val());
                        _n>0?$inp.val(_n-1).change():$inp.val(0);
                });
                $('.numbox .plus').click(function(){
                    var $inp=$(this).prev('.num');
                    var _n=parseInt($inp.val());
                        $inp.val(_n+1).change();
                });
                $('#usePoint').on('change',function(e){
                    if(e.target.checked){
                        if (parseInt($('#js_totalPoint').text()) > parseInt($('#js_Point').text())){
                            tip("需要的积分数量大于您目前拥有的积分数量");
                            e.target.checked=false;
                        }else{
                            totalPrice();
                        }
                    }else{
                        console.log('取消选中');
                        totalPrice();
                    }
                })

                $('.numbox .num').on('change',function(evt){
                    totalPrice(evt);
                });
                //总金额计算
                totalPrice();





                //区域选择
                var _getParam = function (obj, param) {
                    return obj[param] || '';
                };
                var cityPicker = new mui.PopPicker({
                    layer: 3
                });

                cityPicker.setData(cityData3);

                var area = $("input[name='area']").val().split('/')

                for (var i = 0; i < cityData3.length; i++) {
                    if (cityData3[i].text == area[0]) {
                        cityPicker.pickers[0].setSelectedIndex(i)
                        var level2 = cityData3[i].children
                        for (var j = 0; j < level2.length; j++) {
                            if (level2[j].text == area[1]) {
                                cityPicker.pickers[1].setSelectedIndex(j)
                                var level3 = level2[j].children
                                if (level3) {
                                    for (var k = 0; k < level3.length; k++) {
                                        if (level3[k].text == area[2]) {
                                            cityPicker.pickers[2].setSelectedIndex(k)
                                            break
                                        }
                                    }
                                }
                                break
                            }
                        }
                        break
                    }
                }

                $("#cityPicker").click(function () {
                    var _self = this;
                    cityPicker.show(function (items) {
                        var text = _getParam(items[0], 'text') + "/" + _getParam(items[1], 'text') + "/" + _getParam(items[2], 'text');
                        $(_self).text(text);
                        //var val = _getParam(items[0], 'value') + "/" + _getParam(items[1], 'value') + "/" + _getParam(items[2], 'value');
                        $("input[name='area']").val(text)
                    });
                })
            });
    </script>
</body>
</html>